<template>
  <div class="dynamicCZML">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
// 加载 Cesium
import * as Cesium from 'cesium'
import 'cesium/Build/Cesium/Widgets/widgets.css'
var viewer // 视图
export default {
  mounted() {
    this.initHandle()
  },
  methods: {
    /* *********************初始化 start********************* */
    initHandle() {
      var viewerOption = {
        // geocoder: false, // 地理位置查询定位控件
        // homeButton: false, // 默认相机位置控件
        // timeline: false, // 时间滚动条控件
        // navigationHelpButton: false, // 默认的相机控制提示控件
        // fullscreenButton: false, // 全屏控件
        // scene3DOnly: true, // 每个几何实例仅以3D渲染以节省GPU内存
        baseLayerPicker: false // 底图切换控件
        // animation: false, // 控制场景动画的播放速度控件
        // vrButton: false
      }
      Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI3ZjA2ZDQ2ZS02NTA4LTQ2NTItODE1My1kZjE3MjBkMjFkNzAiLCJpZCI6NDM5NCwic2NvcGVzIjpbImFzciIsImdjIl0sImlhdCI6MTU0MDcyNzI4Nn0.L7P8pJponZfYjdsGnEw2hIHd2AN0h-SuYl6XvzOwLeA'
      viewer = new Cesium.Viewer('cesiumContainer', viewerOption)

      // 加载底图
      viewer.imageryLayers.addImageryProvider(
        new Cesium.SingleTileImageryProvider({
          url: require('../../../images/worldimage.jpg')
        })
      )

      // 隐藏 LOGO 版权
      viewer._cesiumWidget._creditContainer.style.display = 'none'

      // 去掉entity的点击事件 start
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)
      viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
      // 去掉entity的点击事件 end

      // CZML是一种JSON格式的字符串，用于描述与时间有关的动画场景，
      // CZML包含点、线、地标、模型、和其他的一些图形元素，并指明了这些元素如何随时间而变化
      // CZML 详解：https://www.cnblogs.com/mazhenyu/p/8315840.html
      var czml = [{
        id: 'document',
        name: 'polygon',
        version: '1.0',
        clock: {
          interval: '2012-08-04T16:00:00Z/2012-08-04T18:00:00Z',
          currentTime: '2012-08-04T16:00:00Z',
          multiplier: 10
        }
      }, {
        id: 'shape2',
        name: 'Red box with black outline',
        availability: '2012-08-04T16:00:00Z/2012-08-04T18:00:00Z',
        /* "position" : {
          "cartographicDegrees" : [-66.62557, 516.92809, 100.0]
        }, */
        box: {
          dimensions: {
            cartesian: [30.0, 30.0]
          },
          material: {
            stripe: {
              orientation: 'VERTICAL',
              evenColor: {
                rgba: [10, 211, 250, 0]
              },
              oddColor: {
                rgba: [10, 211, 250, 255]
              },
              offset: {
                number: 1
              },
              repeat: 0.5
            }
          }
        },
        path: {
          material: {
            solidColor: {
              color: {
                interval: '2012-08-04T16:00:00Z/2012-08-04T18:00:00Z',
                rgba: [255, 0, 0, 128]
              }
            }
          },
          width: [{
            interval: '2012-08-04T16:00:00Z/2012-08-04T18:00:00Z',
            number: 3.0
          }],
          show: [{
            interval: '2012-08-04T16:00:00Z/2012-08-04T18:00:00Z',
            boolean: true
          }]
        },
        position: {
          interpolationAlgorithm: 'LAGRANGE',
          interpolationDegree: 1,
          epoch: '2012-08-04T16:00:00Z',
          cartographicDegrees: [
            0.0, 118.87841653400005, 30.95679870500004, 0.0,
            10.0, 118.87826541800007, 30.95680770900003, 0.0,
            20.0, 118.8774481050001, 30.956860625000047, 0.0,
            30.0, 118.87660414600009, 30.956910105000077, 0.0,
            40.0, 118.8759846580001, 30.95694296000005, 0.0,
            50.0, 118.87542502500003, 30.956978761000073, 0.0,
            60.0, 118.87473380100005, 30.957024103000037, 0.0

          ]
        }
      }]

      var dataSourcePromise
      var i = 30.957024
      var a = 60
      setInterval(function() {
        i += 0.0001
        a += 10
        // 路径最后添加节点
        czml[1].position.cartographicDegrees.push(a, 118.8747338, i, 0)
        // 修改当前时间
        czml[0].clock.currentTime = viewer.clock.currentTime.toString()
        // 清空之前数据，放置数据累积
        viewer.entities.removeAll()
        // 重新添加修改后的数据
        viewer.dataSources.add(Cesium.CzmlDataSource.load(czml))
      }, 1000)

      dataSourcePromise = Cesium.CzmlDataSource.load(czml)
      viewer.dataSources.add(dataSourcePromise)
      viewer.zoomTo(dataSourcePromise)
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
